<!DOCTYPE HTML>
<html>
<head>
  <title>加载海量点</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
  <style type="text/css">
    html,body{
        margin:0;
        width:100%;
        height:100%;
        background:#ffffff;
    }
    #map{
        width:100%;
        height:100%;
    }
    #panel {
        position: absolute;
        top:30px;
        left:10px;
        z-index: 999;
        color: #fff;
    }
    #login{
        position:absolute;
        width:300px;
        height:40px;
        left:50%;
        top:50%;
        margin:-40px 0 0 -150px;
    }
    #login input[type=password]{
        width:200px;
        height:30px;
        padding:3px;
        line-height:30px;
        border:1px solid #000;
    }
    #login input[type=submit]{
        width:80px;
        height:38px;
        display:inline-block;
        line-height:38px;
    }
  </style>
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=8526cdc9eaa7faa35706d8d0fe54528d"></script>
  <script src="/assets/js/building/jquery-1.11.1.min.js"></script>
</head>
<body>
    <div id="map"></div>
    <script type="text/javascript">
    var map = new BMap.Map("map", {});                        // 创建Map实例
    map.centerAndZoom(new BMap.Point(121.377286,31.182644), 14);     // 初始化地图,设置中心点坐标和地图级别
    map.enableScrollWheelZoom();  
    var marker = new BMap.Marker(new BMap.Point(121.377286,31.182644));  // 创建标注
    map.addOverlay(marker);                       //启用滚轮放大缩小
    // var circle = new BMap.Circle(new BMap.Point(121.377286,31.182644),5000,{fillColor:"blue", strokeWeight: 1 ,fillOpacity: 0.3, strokeOpacity: 0.3});
    // map.addOverlay(circle);
    if (document.createElement('canvas').getContext) {  // 判断当前浏览器是否支持绘制海量点
        var points = [];  // 添加海量点数据
        $.ajax({
            url:"/Mapsearch/getdata",
            type:"get",
            dataType: 'json',
            success: function(data){
                // console.log(data[0].lng);
                for (var i = 0; i < data.length; i++) {
                  points.push(new BMap.Point(data[i].lng, data[i].lat));
                }
                console.log(points);
                // points.push(new BMap.Point(121.398555,31.215647));
                var options = {
                    size: BMAP_POINT_SIZE_BIG,
                    shape: BMAP_POINT_SHAPE_STAR,
                    color: '#d340c3'
                }
                var pointCollection = new BMap.PointCollection(points, options);  // 初始化PointCollection
                pointCollection.addEventListener('click', function (e) {
                  alert('单击点的坐标为：' + e.point.lng + ',' + e.point.lat);  // 监听点击事件
                });
                map.addOverlay(pointCollection);  // 添加Overlay
                    }
                });
        
    } else {
        alert('请在chrome、safari、IE8+以上浏览器查看本示例');
    }
  </script>
</body>
</html>

